<!--
 * 间隔、间距
 -->
<template>
    <view class="a-gap" :class="_classes" :style="_styles"></view>
</template>

<script setup>
import { computed } from "vue";
import props from "./props.js";

// props
const _props = defineProps(props);

// classes
const _classes = computed(() => {
    const arr = [];
    if (_props.inline) arr.push(`a-gap-inline`);
    return arr;
});

// styles
const _styles = computed(() => {
    const arr = [];
    if (_props.size) arr.push(`--a-gap-size: ${_props.size}`)
    return arr;
});
</script>

<style scoped>
.a-gap {
    display: flex;
    height: var(--a-gap-size);
    width: 100%;
}

.a-gap-inline {
    display: inline-flex;
    height: 0;
    width: var(--a-gap-size);
}
</style>
